<template>
	<view>
		<image :src="img" style="width: 100%" mode="widthFix"></image>
		<view class="boxes uniBtn" v-for="(item, index) in list" :key="index" @click="detail(item.id,item.title)">
			<view>
				<view class="b1">{{ item.title }}</view>
				<view class="uniFlex">
					<view class="b2">房间位置：{{ item.address }}</view>
					<image class="b3" src="@/static/index/a1.png" mode=""></image>
				</view>
			</view>
			<view class="b4">{{ item.dist }}km</view>
		</view>
	</view>
</template>

<script>
import QQMapWX from '@/common/qqmap/qqmap-wx-jssdk.js';
var qqmapsdk;
export default {
	data() {
		return {
			id: '',
			img:'',
			list: []
		};
	},
	onLoad(options) {
		this.id = options.id;
		this.img = options.img;
	},
	onShow() {
		qqmapsdk = new QQMapWX({
			key: uni.getStorageSync('mapkey')
		});
		this.getFuzzyLocation();
		// this.getList();
	},
	methods: {
		getFuzzyLocation() {
			let that = this;
			uni.getFuzzyLocation({
				type: 'wgs84',
				success(res) {
					that.latitude = res.latitude;
					that.longitude = res.longitude;
					that.getLocal(res.latitude, res.longitude);
				},
				fail: (err) => {
					console.log(err, 1);
					if (err.errMsg === 'getFuzzyLocation:fail') {
						uni.showToast({
							title: '请勿频繁定位',
							icon: 'none'
						});
					}
					if (err.errMsg === 'getFuzzyLocation:fail auth deny') {
						// 未授权
						uni.showModal({
							content: '无法定位，请点击右上角...后设置里打开位置信息',
							showCancel: false
						});
					}
					if (err.errMsg === 'getFuzzyLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF') {
						uni.showModal({
							content: '请开启手机定位服务',
							showCancel: false
						});
					}
				}
			});
		},
		// 获取当前地理位置
		getLocal: function (latitude, longitude) {
			let that = this;
			qqmapsdk.reverseGeocoder({
				location: {
					latitude: latitude,
					longitude: longitude
				},
				success: function (res) {
					let city = res.result.ad_info.city;
					// console.log(city);
					// console.log(res.result);
					that.getList(latitude, longitude, city);
				},
				fail: function (res) {
					// console.log(11111, res);
					uni.showToast({
						title: res.message,
						duration: 5000,
						icon: 'none'
					});
				},
				complete: function (res) {
					// console.log(res);
				}
			});
		},
		async getList(latitude, longitude, city) {
			let res = await this.$api.fanglist({
				tcid: this.id,
				latitude: latitude,
				longitude: longitude,
				city: city
				// latitude: 32.8982945,
				// longitude: 115.8603917,
				// city: '阜阳市'
			});
			if (res.code == 1) {
				this.list = res.data;
			}
		},
		detail(id,title) {
			uni.navigateTo({
				url: '/pages/index/rooms/detail?roomid=' + id+'&title='+title+'&tid='+this.id
			});
		}
	}
};
</script>

<style scoped lang="less">
page {
	background-color: #fff;
}
.boxes {
	margin: 0 30rpx;
	padding: 30rpx 0;
	border-bottom: 1px solid #d2d2d2;
	.b1 {
		font-size: 30rpx;
		color: #080808;
		margin-bottom: 15rpx;
		font-weight: bold;
	}
	.b2 {
		color: #6f6f6f;
	}
	.b3 {
		width: 20rpx;
		height: 29rpx;
		margin: 0 15rpx;
	}
	.b4 {
		color: #6f6f6f;
		font-size: 30rpx;
	}
}
</style>
